<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <common-head></common-head>
    <common-head></common-head>
    <common-head></common-head>
  </div>
  <script src="./vue.global.js"></script>
  <script>
    const { createApp } = Vue;
    const  app = createApp()
    // 创建全局组件
    /* 
      app.component
        参数1  组件名 （标签名） 命名建议： 最好使用两个或者两个以上单词组成  CommonHead  命名建议 common-head 大驼峰 CommonHead
        ps: vue中 官方推荐使用大驼峰， 使用标签vue2推荐 变成 小写加 - <common-head/>
            vue3 组合式api(新的api) <CommonHead/>
        参数2  组件config对象， 同 app config

        app.component 本质上 是创建一个 class 类， <组件/> 使用组件时， new class 得到一个组件实例，传入 app.component第二个参数config
    */
    app.component("CommonHead", {
      // 模板 组件 视图结构 （html标签结构）
      template: `
        <div>
          <h1>这是公共头部标签</h1>  
          <button @click="changeMsg">改变msg</button>
          {{ msg }}
        </div>
      `,
      data() {
        return {
          msg: '组件的数据'
        }
      },
      methods: {
        changeMsg() {
          this.msg=  '组件数据改变了'
        }
      },
      mounted(){
        console.log(this, 11);
      }
    })
    app.mount('#app')
  </script>
</body>
</html>